<template>
  <div>
    <div class="list_head_style">当前区域活动参数列表</div>
    <el-table
      class="msg_table"
      :data="tableData"
      :header-cell-style="{'text-align':'center','font-weight':'bold','font-size':'130%'}"
      :row-style="{'height':'0px','color':'grey'}" 
      :cell-style="{'padding':'7px','text-align':'center','font-size':'130%'}"
      :height="tableHeight"
      @row-dblclick="toEquipmentUnitPiMonitor()"
    >
      <el-table-column prop="parameter" label="Parameter" min-width="100px"></el-table-column>
      <el-table-column prop="pi" label="PI"></el-table-column>
      <el-table-column prop="unit" label="Unit"></el-table-column>
      <el-table-column prop="order" label="Order"></el-table-column>
      <el-table-column prop="batch" label="Batch"></el-table-column>
      <el-table-column min-width="90px" prop="brand_sku" label="Brand/SKU"></el-table-column>
      <el-table-column prop="status" label="Status"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  beforeMount() {
    this.calHeight();
  },
  methods: {
    calHeight() {
      this.tableHeight = window.innerHeight * 0.9 * 0.8 * 0.49 * 0.83;
      // console.log(this.tableHeight)
    },
    toEquipmentUnitPiMonitor() {
      this.$router.push("/equipment_unit_pi_monitor");
    }
  },
  data() {
    return {
      tableHeight: "210",
      tableData: [
        {
          parameter: "2016-05-03",
          pi: "王小虎",
          unit: "上海",
          order: "普陀区",
          batch: "001",
          brand_sku: "bev",
          status: "good"
        },
        {
          parameter: "2016-05-02",
          pi: "王小虎",
          unit: "上海",
          order: "普陀区",
          batch: "001",
          brand_sku: "bev",
          status: "good"
        },
        {
          parameter: "2016-05-04",
          pi: "王小虎",
          unit: "上海",
          order: "普陀区",
          batch: "001",
          brand_sku: "bev",
          status: "good"
        },
        {
          parameter: "2016-05-01",
          pi: "王小虎",
          unit: "上海",
          order: "普陀区",
          batch: "001",
          brand_sku: "bev",
          status: "good"
        },
        {
          parameter: "2016-05-08",
          pi: "王小虎",
          unit: "上海",
          order: "普陀区",
          batch: "001",
          brand_sku: "bev",
          status: "good"
        },
        {
          parameter: "2016-05-06",
          pi: "王小虎",
          unit: "上海",
          order: "普陀区",
          batch: "001",
          brand_sku: "bev",
          status: "good"
        },
        {
          parameter: "2016-05-07",
          pi: "王小虎",
          unit: "上海",
          order: "普陀区",
          batch: "001",
          brand_sku: "bev",
          status: "good"
        },
        {
          parameter: "2016-05-07",
          pi: "王小虎",
          unit: "上海",
          order: "普陀区",
          batch: "001",
          brand_sku: "bev",
          status: "good"
        },
        {
          parameter: "2016-05-07",
          pi: "王小虎",
          unit: "上海",
          order: "普陀区",
          batch: "001",
          brand_sku: "bev",
          status: "good"
        },
        {
          parameter: "2016-05-07",
          pi: "王小虎",
          unit: "上海",
          order: "普陀区",
          batch: "001",
          brand_sku: "bev",
          status: "good"
        },
        {
          parameter: "2016-05-07",
          pi: "王小虎",
          unit: "上海",
          order: "普陀区",
          batch: "001",
          brand_sku: "bev",
          status: "good"
        }
      ]
    };
  }
};
</script>
<style lang="less" scoped>
.list_head_style {
  text-align: center;
  font-weight: bold;
  color: #14d288;
  margin-top: 10px;
  font-size: 130%
}
.msg_table {
  width: 100%;
  height: 100%;
  /deep/.el-table__body-wrapper {
    cursor: pointer;
    overflow: auto;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
    border-radius: 10px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }
}
</style>

